<template>
  <div class="m-top-header">
    <!-- 头部导航 -->
    <div class="app-container m-header-container">
      <div class="logo">
        <img src="../../assets/haoxiadianlogo.png" alt="">
      </div>
      
      <div class="m-header clearfix">
        <!-- 头部导航列表 -->
        <div class="header-list">
          <div class="nav" 
            v-for="(nav, navIndex) in oneMenuList" 
            :key="navIndex" 
            :class="{'actived': navIndex == curNav &&  returnIndex != '-1'}" 
            @click="onChangeNav(navIndex, nav.oneMenu, nav.twoList)">
            {{nav.oneMenu}}
          </div>
        </div>
        <!-- 用户登录信息 -->
        <div class="header-user fr">
          <span>您好！</span>
          <span>{{userName}}</span>
          <span class="user-options" @click="clearUSerInfo">退出</span>
          <span class="cur" @click="onJump">商城首页</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { FONT_MALL_URL } from 'js/const'
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { session } from 'js/util'

export default {
  props: {
    returnIndex: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      userName: this.$store.getters.userName,
      curNav: this.$route.query.cIndex || 0 // 默认当前处于第一个导航
    }
  },
  computed: {
    ...mapGetters(['oneMenuList']),
    /**
     * 计算一级菜单的第一个三级菜单
     */
    defaultUrl() {
      let urlList = []
      this.oneMenuList.forEach(one => {
        one.twoList.forEach((two, twoIndex) => {
          if (two.threeList && two.threeList.length) {
            if (twoIndex == 0 && two.threeList[0].path) {
              urlList.push({'path': two.threeList[0].path, 'threeMenuCode': two.threeList[0].threeMenuCode})
            }
          }
        })
      })
      return urlList
    }
  },
  created() {
    this.fetchMenuList(this.$store.getters.token)
  },
  methods: {
    ...mapMutations(['clearUserInfo']),
    ...mapActions(['fetchMenuList', 'addBreads', 'setBreads']),
    /**
     * 切换导航
     */
    onChangeNav(index, title, menu) {
      session.set('curMenu', menu)
      session.set('curMenuTitle', title) // 当前第一级导航
      session.set('curMenuIndex', index)
      this.curNav = index
      this.setBreads([{name: title}]) // 面包屑导航
      this.$router.push(`/${this.defaultUrl[index].path}?three=${this.defaultUrl[index].threeMenuCode}&cIndex=${index}`) // 点击以及菜单时，默认展示所属二级菜单的一个三级菜单的第一个页面
      this.$emit('on-changeNav', title)
    },
    /**
     * 退出登录
     */
    clearUSerInfo() {
      this.clearUserInfo()
    },
    /**
     * 跳转好下单前台首页
     */
    onJump() {
      window.open(`${FONT_MALL_URL}`)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.cur {
  cursor: pointer;
}
.m-top-header {
  width: 100%;
  min-width: 1380px;
  height: 68px;
  background-color: $color-main;
  color: #ffffff;
  margin-bottom: 20px;
}
.m-header-container {
  position: relative;
  height: inherit;
  .logo {
    width: 90px;
    height: auto;
    display: inline-block;
    margin-right: 80px;
    margin-top: 16px;
  }
}
.m-header {
  position: absolute;
  display: inline-block;
  bottom: 0;
  width: 1200px;
  .header-list {
    display: inline-block;
    font-size: 16px;
    .nav {
      display: inline-block;
      margin: 0 20px;
      cursor: pointer;
    }
    .actived {
      padding: 5px 10px;
      background:#ffffff;
      color: $color-main;
      font-weight: bold;
    }
  }
  .header-user {
    position: absolute;
    right: 0;
    width: 30%;
    display: inline-block;
    // margin-left: 100px;
    vertical-align: bottom;
    bottom: 0;
    padding: 5px 0 5px 10px;
    text-align: right;
    .user-options {
      cursor: pointer;
      &:before, &:after {
        content: '|';
        color: #727171;
        padding: 0 10px;
      }
    }
  }
}
</style>
